<template>
  <div class="container">
    <div class="table">
      <el-table
        :data="tableData"
        style="width: 80%; height: 98%"
        v-loading="loading"
        fit
        height="750"
      >
        <el-table-column prop="Id" label="序号" width="70"> </el-table-column>
        <el-table-column prop="t001" label="设备品种"></el-table-column>
        <el-table-column prop="t002" label="企业编号"></el-table-column>
        <el-table-column prop="t003" label="规格型号"></el-table-column>
        <el-table-column prop="t004" label="注册编码"></el-table-column>
        <el-table-column prop="" label="安全监控">
          <template>
            <el-button
              type="text"
              style="text-decoration: underline"
              @click="showDialogA()"
              >{{ "查看" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="健康监测">
          <template>
            <el-button
              type="text"
              style="text-decoration: underline"
              @click="showDialogB()"
              >{{ "查看" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="隐患排查">
          <template>
            <el-button
              type="text"
              style="text-decoration: underline"
              @click="showDialogE()"
              >{{ "查看" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="健康诊断">
          <template>
            <el-button
              type="text"
              style="text-decoration: underline"
              @click="showDialogC()"
              >{{ "查看" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="故障预测">
          <template>
            <el-button
              type="text"
              style="text-decoration: underline"
              @click="showDialogD()"
              >{{ "查看" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="预知维修">
          <template>
            <el-button
              type="text"
              style="text-decoration: underline"
              @click="showDialogF()"
              >{{ "查看" }}</el-button
            >
          </template>
        </el-table-column>
        <el-table-column prop="" label="健康报告">
          <template> </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="pageSizeChange"
        @current-change="pageChange"
        :current-page="currentPage"
        :page-sizes="[15, 30, 50, 80]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :visible.sync="dialogAVisible"
      :append-to-body="true"
      width="60%"
      @close="closeDialogA()"

    >
      <dialog-a ref="dialogA"></dialog-a>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogBVisible"
      :append-to-body="true"
      width="60%"
    >
      <dialog-b></dialog-b>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogCVisible"
      :append-to-body="true"
      width="60%"
    >
      <dialog-c></dialog-c>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogDVisible"
      :append-to-body="true"
      width="60%"
    >
      <dialog-d></dialog-d>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogEVisible"
      :append-to-body="true"
      width="60%"
    >
      <dialog-e></dialog-e>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
    <el-dialog
      :visible.sync="dialogFVisible"
      :append-to-body="true"
      width="60%"
    >
      <dialog-f></dialog-f>
      <span slot="footer" class="dialog-footer"> </span>
    </el-dialog>
  </div>
</template>
<script>
import { req } from "@/api/base/BaseApi";
import DialogA from "./dialogA.vue";
import DialogB from "./dialogB.vue";
import DialogC from "./dialogC.vue";
import DialogD from "./dialogD.vue";
import DialogE from "./dialogE.vue";
import DialogF from "./dialogF.vue";

export default {
  created() {
    this.searchList();
  },
  data() {
    return {
      tableData: [
        {
          Id: 1,
          t001: "冶金桥式起重机",
          t002: "一钢轧 008",
          t003: "QD200/63-23.5A7",
          t004: "41003405002006080017",
          t005: "太原重型机械有限公司",
        },
        {
          Id: 2,
          t001: "冶金桥式起重机",
          t002: "一钢轧 003",
          t003: "QD190/63-22.3A7",
          t004: "40103405022003090602",
          t005: "太原重型机械有限公司",
        },
      ], // 表格数据
      total: 2, // 表格数据总项数
      loading: false, // 表格是否在加载
      pageSize: 30, // 默认一页15项数据
      currentPage: 1,

      // 弹窗相关
      dialogAVisible: false, // 安全监控弹窗是否显示
      dialogBVisible: false, // 健康监测弹窗是否显示
      dialogCVisible: false, // 健康诊断弹窗是否显示
      dialogDVisible: false, // 故障预测弹窗是否显示
      dialogEVisible: false, // 隐患排查弹窗是否显示
      dialogFVisible: false, // 预知维修弹窗是否显示
    };
  },
  props: {
    checkUnit: String,
  },
  components: { DialogA, DialogB, DialogC, DialogD, DialogE, DialogF },
  methods: {
    // 获取数据
    async searchList() {},
    // 页面大小改变
    async pageSizeChange(pageSize) {},
    // 页数改变
    async pageChange(page) {},
    getRowClass({ row, column, rowIndex, columnIndex }) {
      console.log("调用行样式");
      return {
        background: "#06134A",
        color: "#72C22D",
      };
    },
    // 展示安全监控弹窗
    showDialogA() {
      this.dialogAVisible = true;
      setTimeout(() => {
        this.$refs.dialogA.open();
      }, 0);
      // if (this.$refs.dialogA) {
      //   this.$refs.dialogA.open();
      // }
    },
    // 关闭安全监控弹窗
    closeDialogA() {
      console.log("关闭安全监控弹窗");
      this.$refs.dialogA.close();
    },
    // 展示健康监测弹窗
    showDialogB() {
      this.dialogBVisible = true;
    },
    // 展示健康诊断弹窗
    showDialogC() {
      this.dialogCVisible = true;
    },
    // 展示故障预测弹窗
    showDialogD() {
      this.dialogDVisible = true;
    },
    // 展示隐患排查弹窗
    showDialogE() {
      this.dialogEVisible = true;
    },
    // 展示预知维修弹窗
    showDialogF() {
      this.dialogFVisible = true;
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  display: flex;
  flex-direction: column;
}
</style>